<template>
  <div class="content-section">
    <video-list v-if="state === 1" @edit="edit" />
    <video-chapter v-if="state === 2" :current-row="currentRow" @back="toCourse" @next="toPlayer" />
    <chapter-detail v-if="state === 3" :chapter-row="chapterRow" @back="toChapter" />
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import VideoList from './VideoList.vue';
  import VideoChapter from './VideoChapter.vue';
  import ChapterDetail from './ChapterDetail.vue';

  const state = ref(1);
  const currentRow = ref({});
  const chapterRow = ref({});

  function edit(row: any) {
    currentRow.value = row;
    state.value = 2;
  }

  function toCourse() {
    state.value = 1;
  }

  function toChapter() {
    state.value = 2;
  }

  function toPlayer(row: any) {
    chapterRow.value = row;
    state.value = 3;
  }
</script>
<style lang="less" scoped></style>
